<template>
  <!-- Vue3组件中的模板结构没有根标签 -->
  <h1>一个人的信息</h1>
  姓:<input v-model="person.firstName" type="text"><br>
  名:<input v-model="person.lastName" type="text"><br>
  全名:<span>{{person.fullName}}</span><br>
  全名：<input v-model="person.fullName" type="text"><br>
</template>

<script>
  // import {h} from 'vue'
  import { reactive,computed } from 'vue'
  export default {
    name: 'Demo',
    /* computed: {//vue2写法
      fullName() {
        return `${this.person.firstName}-${this.person.lastName}`
      }
    }, */
    setup() {
      //属性
      let person = reactive({//简称Proxy对象，基于ES6的Proxy实现，通过代理对象操作源对象的内部数据进行操作
        firstName:'张',
        lastName:'三',
      })
      //Vue3计算属性--简写（没有考虑计算属性被修改的情况）
      /* person.fullName = computed(()=>{
        return `${person.firstName}-${person.lastName}`}) */
      //Vue3计算属性--完整写法（考虑计算属性读写）与vue2计算属性一致
      person.fullName = computed({
        get(){
          return `${person.firstName}-${person.lastName}`
        },
        set(value){
          let arr = value.split('-')
          console.log(arr);
          person.firstName = arr[0]
          person.lastName = arr[1]
        }
      })
       //返回一个对象(常用)
      return {
        person,
      }
    }
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>
